<template>
<div id="home">
  <!--        <swiper :options="swiperOption" ref="mySwiper" @transitionEnd="onSlideChange">-->
  <!--            <swiper-slide><sb></sb></swiper-slide>-->
  <!--            <swiper-slide><sc></sc></swiper-slide>-->
  <!--            <swiper-slide><yh></yh></swiper-slide>-->
  <!--        </swiper>-->

  <!--        <div class="swiper-container" ref="mySwiper">-->
  <!--            <div class="swiper-wrapper">-->
  <!--             <div class="swiper-slide"><sb></sb></div>-->
  <!--             <div class="swiper-slide"><sc></sc></div>-->
  <!--             <div class="swiper-slide"><yh></yh></div>-->
  <!--            </div>-->
  <!--        </div>-->

  <!--        <div class="btnbox" v-show="$store.state.btnshow">-->
  <!--            <mu-container>-->
  <!--                 <mu-bottom-nav :value.sync="$store.state.btnnum" @change="btncc">-->
  <!--                    <mu-bottom-nav-item :value="0" title="设备" icon="devices"></mu-bottom-nav-item>-->
  <!--                    <mu-bottom-nav-item :value="1" title="市场" icon="storefront"></mu-bottom-nav-item>-->
  <!--                    <mu-bottom-nav-item :value="2" title="用户" icon="person"></mu-bottom-nav-item>-->
  <!--                </mu-bottom-nav>-->
  <!--            </mu-container>-->

  <!--            <van-row  type="flex" justify="space-around">-->
  <!--                <van-col v-for="(i,index) in btndata" :span="(18/btndata.length)">-->
  <!--                    <div class="divs" @click="btnc(i,index)">-->
  <!--                        <img :src="($store.state.btnnum==index)?i.url1:i.url2" alt="">-->
  <!--                        <p :class="{ps1:index==$store.state.btnnum,ps2:index!=$store.state.btnnum}">{{i.text}}</p>-->
  <!--                    </div>-->
  <!--                </van-col>-->
  <!--            </van-row>-->

  <!--        </div>-->
</div>
</template>

<script>
// import 'swiper/css/swiper.css'
// import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Swiper from 'swiper';
import sb from './sb/index';
import sc from './sc/index';
import yh from './yh/index';
export default {
  name: "home",
  // components: {sb,sc,yh,swiper,swiperSlide},//声明子组件
  components: {
    sb,
    sc,
    yh
  }, //声明子组件
  computed: {},
  data() {
    return {
      btndata: [{
          text: '设备',
          url1: './img/btnbox/shebei1.png',
          url2: './img/btnbox/shebei2.png'
        },
        {
          text: '市场',
          url1: './img/btnbox/sc1.png',
          url2: './img/btnbox/sc2.png'
        },
        {
          text: '用户',
          url1: './img/btnbox/wode1.png',
          url2: './img/btnbox/wode2.png'
        },
      ],
      swiper: {},
    }
  },
  methods: {
    btncc(value) {
      this.$refs.mySwiper.swiper.slideTo(value, 500, false);
    },
    // btnc(i,index){
    //     this.$store.state.btnnum = index;
    //     this.$router.push({path:i.path});
    //     this.$refs.mySwiper.swiper.slideTo(index, 500, false);
    // },

  },

  mounted() {
    var thit = this;
    this.swiper = new Swiper('.swiper-container', {
      on: {
        slideChangeTransitionEnd: function() {
          thit.$store.state.btnnum = this.activeIndex; //监听swiper滑动到某一页并传递当前页的下标
        },
      },
      loop: false,
      initialSlide: this.$store.state.btnnum,
    });
  },
}
</script>

<style scoped>
@import "../../node_modules/swiper/css/swiper.css";

#home {
  /*padding-bottom: 1.31rem;*/
}

.swiper-slide {
  width: 100%;
  /*display: inline-block;*/
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  cursor: pointer;
  position: relative;
}

.swiper-container .swiper-slide .active {
  width: 10rem;
  color: #666;
  background-color: #fff8eb;
}

.ps1 {
  color: #304ECE;
}

.ps2 {
  color: #c9c9c9;
}

.divs p {
  font-size: 0.267rem
    /* 20/75 */
  ;
}

.divs img {
  width: 0.587rem
    /* 44/75 */
  ;
  height: 0.587rem
    /* 44/75 */
  ;
  margin: 0.15rem
    /* 18/75 */
    0 0.03rem
    /* 11.3/75 */
    0;
  /* 11.3/75 */
  ;
}

.divs {
  width: 0.667rem
    /* 50/75 */
    /* 44/75 */
  ;
  height: 100%;
  text-align: center;
  margin: 0 auto;
}

.btnbox {
  width: 100%;
  height: 1.31rem;
  background: #FFFFFF;
  box-shadow: 0rem
    /* 0/75 */
    -0.053rem
    /* -4/75 */
    0.107rem
    /* 8/75 */
    0rem
    /* 0/75 */
    rgba(22, 23, 23, 0.1);
  position: fixed;
  z-index: 999;
  bottom: 0;
  left: 0;
}
</style>
